<!--
/**
* Author: KSJ
* Date: 2022-07-27 13:54
* Desc: 选择影院
*/
-->
<template>
  <yy-page :linear-bg="true">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
    <yy-navbar :border="false" :title="title" left-icon-color="#fff" title-color="#fff" :auto-back="true"></yy-navbar>
    <!-- #endif-->
    <view class="film-page">
      <city-choose ext-class="city-choose" :city="areaInfo && areaInfo.regionName"></city-choose>
      <view class="film-content">
        <scroll-view v-if="dateList.length > 0" :show-scrollbar="false" scroll-x class="flex film-date-scroll">
          <u-tabs :item-style="itemStyle" line-color="#3BC5D2" :active-style="activeStyle" @click="handleChange" :current="current" :list="dateList"></u-tabs>
        </scroll-view>

        <view v-if="list.length > 0">
          <cinema-item
            v-for="item in resultList"
            :key="item.cinemaCode"
            :cinema-name="item.cinemaName"
            :address="item.address"
            :plan-list="item.planList"
            :low-ticket="item.lowTicket"
            :distance="item.distance"
            :item="item"
            @handeClick="onClick"
            @click.native="goCinemaPage(item)"
          ></cinema-item>
        </view>
        <view class="" v-if="resultList.length == 0">
          <view class="tc pt100 fc9" v-if="noScheduling">暂无排期</view>
        </view>
      </view>
    </view>
    <!-- 定位location-bar -->
    <view class="location-bar home-wrap">
      <location-bar></location-bar>
    </view>
  </yy-page>
</template>

<script>
  import LocationBar from '@/subPages/components/LocationBar'
  import CityChoose from './components/CityChoose.vue'
  import CinemaItem from './components/CinemaItem.vue'
  import sharePage from '@/mixins/sharePage'
  import { mapGetters } from 'vuex'
  export default {
    name: '',
    components: {
      CityChoose,
      CinemaItem,
      LocationBar
    },
    mixins: [sharePage],
    data() {
      return {
        activeStyle: { color: '#3BC5D2' },
        itemStyle: {
          'font-size': '24rpx',
          height: '40px',
          padding: '0 40rpx 0 0'
        },
        query: {},
        search: {
          timeId: '', // 时段信息
          hallTypeId: '', // 影厅类型信息
          lineId: '', // 院线信息
          cinemaTagId: '', // 标签信息
          sort: '', // 最近
          countyId: '',
          planDate: '',
          filmCode: ''
        },
        title: '选择影院',
        current: 0,
        noScheduling: false,
        dateList: [],
        list: [], // 影院
        filmCode: null
        // areaInfo: null
      }
    },
    computed: {
      resultList() {
        const list = this.$utils.sortList(this.list, 'distance')

        return list
      },
      ...mapGetters(['areaInfo'])
    },
    onLoad(options) {
      this.query = this.$utils.decode(options.query)
    },
    async onShow() {
      if (this.$auth.platform() === 'mp-alipay' || this.$auth.platform() === 'mp-weixin') {
        const isSingle = this.$auth.getSingleModel()
        if (!isSingle) {
          await this.$auth.toGetAreaInfo(true)
        }
      }
      this.areaInfo = this.$auth.getChooseAreaInfo()
      this.$nextTick(() => {
        console.log('init')
        this.init()
      })
    },
    onReady() {
      // #ifdef H5
      document.title = this.title
      // #endif
    },
    methods: {
      //初始化方法
      init() {
        this.noScheduling = false
        console.log('=======datalist====', !this.query.fromHome)
        if (!this.query.fromHome) {
          this.getDateList()
        } else {
          // 首页进入
          const search = { ...this.search, ...this.query }
          const locationAreaInfo = this.$auth.getLoctionAreaInfo() || {}
          if (locationAreaInfo.cityId === this.areaInfo.cityId && locationAreaInfo.lng) {
            //选择与真实定位相同
            search.longitude = locationAreaInfo.lng.toString()
            search.latitude = locationAreaInfo.lat.toString()
          }
          this.getCinemaList(search)
          // console.log('getAreaInfogetAreaInfo', res)
          // // 首页进入
          // const search = { ...this.search, ...this.query }
          // const locationAreaInfo = this.$auth.getLoctionAreaInfo() || {}
          // if (locationAreaInfo.cityId === this.areaInfo.cityId) {
          //   //选择与真实定位相同
          //   search.longitude = locationAreaInfo.lng.toString()
          //   search.latitude = locationAreaInfo.lat.toString()
          // }
          // this.getCinemaList(search)
        }
        // this.title = this.query.filmName
      },
      getDateList() {
        this.current = 0
        this.dateList = []
        console.log('重置dateList', this.dateList)
        uni.$api.plan
          .cinemaPlanDate(this.query)
          .then((res) => {
            this.dateList = res.map((item) => {
              return { value: item, name: this.$utils.getDateWeek(item) }
            })

            if (this.dateList.length) {
              this.search.planDate = res[0]
              this.handleSearch()
            } else {
              // 没有排期
              this.noScheduling = true
            }
          })
          .catch((err) => {
            console.log('catch', err)
          })
      },
      getCinemaList(search) {
        uni.$api.cinema.cinemaList(search).then((res) => {
          if (this.query.fromHome && res.length > 0) {
            //来源为首页选择影院入口
            // this.$auth.saveCinemaInfo(res[0])
          }
          const { lat, lng } = this.$auth.getLoctionAreaInfo()
          this.list = res.map((i) => {
            i.distance = this.$utils.getDistance(lat, lng, i.latitude, i.longitude) // 计算距离
            return i
          })
          this.noScheduling = res.length === 0
        })
      },
      handleChange(e) {
        this.search.planDate = e.value
        this.handleSearch()
      },
      handleSearch() {
        const search = { ...this.search, ...this.query }
        this.getCinemaList(search)
      },

      onClick(item) {
        // #ifdef MP-ALIPAY
        this.goCinemaPage(item)
        // #endif
      },

      goCinemaPage(item) {
        const fromType = this.query.fromHome
        console.log('goCinemaPage', fromType)
        const d = {
          cinemaId: item.cinemaId,
          filmCode: this.query.filmCode
        }
        this.$auth.saveCinemaInfo(item)
        if (fromType) {
          //特惠页面
          if (fromType === '1') {
            this.$tools.navigateTo('/pages/index/index', {}, 'switchTab')
          }
          if (fromType === '2') {
            // #ifdef MP-TOUTIAO
            d.planDate = this.search.planDate
            this.$tools.navigateTo(`/subPages/selectCinema/selectCinema`, d)
            // #endif
            // #ifndef MP-TOUTIAO
            this.$tools.navigateTo('/pages/mall/mall', {}, 'switchTab')
            // #endif
          }
        } else {
          d.planDate = this.search.planDate
          this.$tools.navigateTo(`/subPages/selectCinema/selectCinema`, d)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .film-page {
    padding-bottom: 80rpx;
    width: 100%;
    overflow-x: hidden;
  }
  .city-choose {
    height: 160rpx;
  }
  .film-content {
    width: 100%;
    overflow-x: hidden;
    min-height: calc(100vh - 330rpx);
    background: #f3f5f7;
    border-radius: 30rpx 30rpx 0 0;
  }
  .film-date-scroll {
    width: 100%;
    height: 40px;
    overflow-x: hidden;
    background: #fff;
    padding: 0 30rpx;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    border-bottom: solid 1rpx #eee;
  }
  .location-bar {
    width: 100%;
    position: fixed;
    bottom: 50rpx;
    left: 0;
    right: 0;
    z-index: 10;
  }
</style>
